<gm:page title="Sample - Maps Mashup" authenticate="false" onLoad="onLoad()">
    
    <div class="gm-app-header">
        <h1>Ski-up</h1>
    </div>
    
    <gm:tabs target="myContainer"/>
    
    <gm:container id="myContainer" style="width:100%">
        
        <gm:section id="sectionNA" title="North America">

            <table width="100%">
                <tr>
                    <td style="padding-right:10px; width:250px;" valign="top">
                      <div style="height: 150px; overflow:auto;">
                        <gm:list id="naFilterList" data="http://spreadsheets.google.com/feeds/list/o08473295916022586556.8726711993508217314/od6/public/values" pagesize="50" template="filterListTemplate">              
                          <gm:handleEvent event="select" execute="handleSelectFilter('naFilterList', 'naResortList', 'na');"/>                  
                        </gm:list>
                      </div>
                      <div style="font-size:80%; height: 100%; overflow: auto;"> 
                        <gm:list id="naResortList" data="http://nubotech-ski-up.s3.amazonaws.com/reports/ski/current/na/ski-report.xml"
                                 pagesize="10" template="resortListTemplate">
                            <gm:handleEvent event="select" src="naResortMap"/>
                        </gm:list>
                      </div>
                    </td>
                    <td valign="top">
                        <gm:map id="naResortMap" style="border:solid black 1px" control="large"
                                maptypes="true" data="${naResortList}" latref="geo:lat" lngref="geo:long"
                                infotemplate="resortMapDetailsTemplate">
                            <gm:handleEvent event="select" src="naResortList"/>
                            <gm:handleEvent event="select" execute="handleSelectResort('naResortList', 'naResortInfoList', 'na');"/>
                        </gm:map>
                    </td>
                    <td style="padding-left:10px; width:200px" valign="top">
                      <div>
                        <gm:list id="naResortInfoList" data="http://spreadsheets.google.com/feeds/list/o08473295916022586556.8765741841819226711/od6/public/values?sq=name%3DFernie" template="resortInfoTemplate" />
                      </div>  
                    </td>                    
                </tr>
            </table>
        </gm:section>
        
        <gm:section id="sectionEU" title="Europe">
            <table width="100%">
                <tr>
                    <td style="padding-right:10px; width:250px;" valign="top">
                      <div style="height: 150px; overflow:auto;">
                        <gm:list id="euFilterList" data="http://spreadsheets.google.com/feeds/list/o08473295916022586556.8726711993508217314/od7/public/values" pagesize="50" template="filterListTemplate">              
                          <gm:handleEvent event="select" execute="handleSelectFilter('euFilterList', 'euResortList', 'eu');"/>                  
                        </gm:list>
                      </div>
                      <div style="font-size:80%; height: 100%; overflow: auto;">                                         
                        <gm:list id="euResortList" data="http://nubotech-ski-up.s3.amazonaws.com/reports/ski/current/eu/ski-report.xml"
                                 pagesize="10" template="resortListTemplate">
                            <gm:handleEvent event="select" src="euResortMap"/>
                        </gm:list>
                      </div>  
                    </td>
                    <td valign="top">
                        <gm:map id="euResortMap" style="border:solid black 1px" control="large"
                                maptypes="true" zoom="3" data="${euResortList}" latref="geo:lat" lngref="geo:long"
                                lat="53.956086" lng="38.496094" infotemplate="resortMapDetailsTemplate">
                            <gm:handleEvent event="select" src="euResortList"/>
                            <gm:handleEvent event="select" execute="handleSelectResort('euResortList', 'euResortInfoList', 'eu');"/>                             
                        </gm:map>
                    </td>
                    <td style="padding-left:10px; width:200px" valign="top">
                      <div>
                        <gm:list id="euResortInfoList" data="http://spreadsheets.google.com/feeds/list/o08473295916022586556.8765741841819226711/od5/public/values?sq=name%3DVerbier" template="resortInfoTemplate" />
                      </div>  
                    </td>                                        
                </tr>
            </table>          
        </gm:section>
        
    </gm:container> 
    
    <gm:template id="resortInfoTemplate">
      <table class="gray-theme" width="100%">
        <thead>                                
          <tr>
            <td>Stats at a Glance</td>
          </tr>
        </thead>
        <tbody repeat="true">
          <tr>
            <td>
              <div style="font-size: 12px">  
                <h2><gm:link ref="gsx:link" labelref="gsx:name"/></h2>
                <b>Summit: </b><gm:text ref="gsx:summit"/><br/>
                <b>Vertical: </b><gm:text ref="gsx:vertical"/><br/>
                <b>Skiable Acres: </b><gm:text ref="gsx:skiable"/><br/>
                <b>Longest Run: </b><gm:text ref="gsx:longest"/><br/>
                <table cellspacing="0" cellpadding="0" border="0" style="font-size: 10px;">
	        <tbody>
		  <tr>
		    <td align="left" style="font-size: 12px; padding-left: 0px"><b>Terrain:</b></td>
		    <td align="left"><img border="0" src="/resources/green.gif"/></td>
		    <td><gm:text ref="gsx:beg"/></td>
		    <td align="left"><img border="0" src="/resources/blue.gif" style="margin-left: 3px;"/></td>
		    <td><gm:text ref="gsx:int"/></td>
		    <td align="left"><img border="0" src="/resources/black.gif" style="margin-left: 3px;"/></td>
		    <td><gm:text ref="gsx:adv"/></td>
		    <td align="left"><img border="0" src="/resources/Doubleblack.gif" style="margin-left: 3px;"/></td>
		    <td><gm:text ref="gsx:exp"/></td>			
		  </tr>
                  <tr>
                    <td align="left" style="font-size: 12px; padding-left: 0px"><b>Lifts:</b></td>
                    <td align="left">Chairs</td>
                    <td align="left"><gm:text ref="gsx:chairs"/></td>
                    <td align="left">Surface</td>
                    <td align="left"><gm:text ref="gsx:surface"/></td>
                    <td align="left">Trams</td>
                    <td align="left"><gm:text ref="gsx:trams"/></td>
                  </tr>
                  <tbody>
                </table>
              </div>
            </td>
          </tr>     
        </tbody>
      </table>      
    </gm:template>
    
    <gm:template id="resortListTemplate">
      <table class="gray-theme" id="resortTableX" border="0" cellspacing="0" cellpadding="0" width="100%">
        <thead>
          <tr>
          <th scope="col">Resort</th>        
          <th scope="col">Base</th>
          </tr>
        </thead>
        <tbody>
          <tr repeat="true">
            <td><gm:text ref="atom:title"/></td>
            <td><gm:text ref="ns1041094098:base"/> - <gm:text ref="ns1041094098:summit"/></td>
          </tr>
        </tbody>  
        <tfoot>
          <tr>
            <td colspan="2"><gm:pager compact="true"/></td>
          </tr>
        </tfoot>
      </table>
    </gm:template>  
    
    <gm:template id="resortListTemplateX">
      <table class="gray-theme" id="resortTable" border="0" cellspacing="0" cellpadding="0" width="100%">
        <thead>
          <tr>
          <th scope="col">Resort</th>        
          <th scope="col">Depth</th>
          </tr>
        </thead>
        <tbody>
          <tr repeat="true">
            <td><gm:text ref="atom:title"/></td>
            <td><gm:text ref="atom:category/@term"/></td>
          </tr>
        </tbody>  
        <tfoot>
          <tr>
            <td colspan="2"><gm:pager compact="true"/></td>
          </tr>
        </tfoot>
      </table>
    </gm:template>
                         
    <gm:template id="resortMapDetailsTemplate">
      <div repeat="true">
        <b><gm:text ref="atom:title"/></b><br/>
        <div style="font-size:80%;">
          <gm:html ref="atom:summary"/>
        </div>
      </div>
    </gm:template>
    
    <gm:template id="filterListTemplate">
      <table class="gray-theme" width="100%">
        <thead>                                
          <tr>
            <td>Filter Resorts By</td>
          </tr>
        </thead>
        <tbody repeat="true">
          <tr>
            <td><small><gm:text ref="atom:title"/></small></td>
          </tr>     
        </tbody>
      </table>
    </gm:template>
                      
  <script type="text/javascript">
    <![CDATA[      
      function onload() {
        var namap = google.mashups.getObjectById('naResortMap').getMap();
        var eumap = google.mashups.getObjectById('euResortMap').getMap();
        setupMap(namap);
        setupMap(eumap);
        var narinfo = google.mashups.getObjectById("naResortInfoList");
        narinfo.setVisible(false);
        var eurinfo = google.mashups.getObjectById("euResortInfoList");
        eurinfo.setVisible(false);
      }
    
      function setupMap(map) {
        map.enableDoubleClickZoom();
        map.enableContinuousZoom();
        map.setMapType(G_HYBRID_MAP);
      }
    
      function handleSelectResort(resortList, infoList, region) {
        var resorts = google.mashups.getObjectById(resortList).getData();
        var resort = google.mashups.getObjectById(resortList).getSelectedEntry();
        var resortNameGPath = new GPath('atom:title');
        var resortName = resortNameGPath.getValue(resort);
        var sqString = '?sq=name%3D' + '%22' + encodeURI(resortName) + '%22';
        var worksheetIds = {'na' : 'od6', 'eu' : 'od5'};
        var url = 'http://spreadsheets.google.com/feeds/list/o08473295916022586556.8765741841819226711/' + worksheetIds[region] + '/public/values' + sqString;
        var ri = google.mashups.getObjectById(infoList);
        ri.setData(url);
        ri.setVisible(true);
      }
    
      function handleSelectFilter(filterList, resortList, region) {
        var filters = google.mashups.getObjectById(filterList).getData();
        var selected = google.mashups.getObjectById(filterList).getSelectedEntry();
        // get the feed
        var linkGPath = new GPath('gsx:link');
        var link = linkGPath.getValue(selected);
        var templateId = "resortListTemplate";
        var url = "http://nubotech-ski-up.s3.amazonaws.com/reports/ski/current/" + region + "/ski-report.xml";
        if (link != null && link.length > 0) {
          url = link + '&feed=' + encodeURI(url);
          var filterGPath = new GPath('gsx:filter');
          var filter = filterGPath.getValue(selected);
          if (filter != null && filter.length > 0) {
            // append
            url += '&filter=' + encodeURI(filter);
          }
          templateId = "resortListTemplateX";
        }
        
        google.mashups.getObjectById(resortList).setData(url);
        google.mashups.getObjectById(resortList).setTemplate(templateId);
      }
    
    ]]></script>
    
</gm:page>


